<template>
<div id="wangeditor">
    <div ref="editorElem"></div>
</div>
</template>

<script>
import E from "wangeditor";
export default {
    name: "Editor",
    data() {
        return {
            editor: null,
            myValue: ''
        };
    },
    props: {
        value: {
            type: String,
            default: ''
        },
        height: {
            type: Number,
            default: 500
        }
    },
    watch: {
        value(val) {
            this.myValue = val
        },
        myValue(val) {
            this.$emit('input', val)
        }
    },
    mounted() {
        this.editor = new E(this.$refs.editorElem);
        this.editor.config.fontNames = [
            '黑体',
            '仿宋',
            '楷体',
            '标楷体',
            '华文仿宋',
            '华文楷体',
            '宋体',
            '微软雅黑',
            'Arial',
            'Tahoma',
            'Verdana',
            'Times New Roman',
            'Courier New',
        ]
        this.editor.config.onchange = (newHtml) => this.myValue = newHtml
        this.editor.config.uploadImgShowBase64 = true
        this.editor.config.height = this.height
        this.editor.config.zIndex = 500
        this.editor.create(); // 创建富文本实例

    }
}
</script>
